﻿<h3 id="event-bubbling">Bubbling standard event</h3>

<div @onclick="@(() => LogEvent("parent onclick"))">
    @* This element shows you can stop propagation even without necessarily also handling the event *@
    <div @onclick:stopPropagation="@intermediateStopPropagation">
        <button id="button-with-onclick" @onclick="@(() => LogEvent("target onclick"))" @onclick:stopPropagation="@targetStopPropagation">
            Button with onclick handler
        </button>
        <button id="button-without-onclick">
            Button without onclick handler
        </button>
    </div>
</div>

<fieldset>
    <legend>Options</legend>
    <label>
        <input id="intermediate-stop-propagation" type="checkbox" @bind="intermediateStopPropagation" />
        Stop propagation on intermediate element
    </label>
    <label>
        <input id="target-stop-propagation" type="checkbox" @bind="targetStopPropagation" />
        Stop propagation on target element
    </label>
</fieldset>

<h3>PreventDefault</h3>

<div @onclick:preventDefault="@ancestorPreventDefault">
    <p>
        <label>
            <input type="checkbox" id="checkbox-with-preventDefault-true" @onclick:preventDefault @onclick="@(() => LogEvent("Checkbox click"))" @onchange="@(() => LogEvent("Checkbox change"))" />
            Checkbox with onclick preventDefault
        </label>
    </p>
    <p>
        <label>
            <input type="checkbox" id="checkbox-with-preventDefault-false" @onclick:preventDefault="@false" @onclick="@(() => LogEvent("Checkbox click"))" @onchange="@(() => LogEvent("Checkbox change"))" />
            Checkbox with onclick preventDefault = false
        </label>
    </p>
    <p>
        Textbox that can block keystrokes: <input id="textbox-that-can-block-keystrokes" @onkeydown:preventDefault="@preventOnKeyDown" @onkeydown="@(() => LogEvent("Received keydown"))" />
    </p>
</div>

<fieldset>
    <legend>Options</legend>
    <label>
        <input id="ancestor-prevent-default" type="checkbox" @bind="ancestorPreventDefault" />
        Prevent default on ancestor
    </label>
    <label>
        <input id="prevent-keydown" type="checkbox" @bind="preventOnKeyDown" />
        Block keystrokes
    </label>
</fieldset>

<h3>Bubbling custom event</h3>

<div onsneeze="@(new Action(() => LogEvent("parent onsneeze")))">
    <div id="element-with-onsneeze" onsneeze="@(new Action(() => LogEvent("target onsneeze")))">Element with onsneeze handler</div>
    <div id="element-without-onsneeze">Element without onsneeze handler</div>
</div>

<h3>Non-bubbling standard event</h3>

<!-- The new Action(...) is needed until we add support for onfocus -->
<div @onfocus="@(new Action(() => LogEvent("parent onfocus")))">
    <p>With onfocus: <input id="input-with-onfocus" @onfocus="@(new Action(() => LogEvent("target onfocus")))" /></p>
    <p>Without onfocus: <input id="input-without-onfocus" /></p>
</div>

<h3>Event log</h3>

<textarea readonly @bind="logValue"></textarea>
<button id="clear-log" @onclick="@(() => { logValue = string.Empty; })">Clear log</button>

@code {
    bool intermediateStopPropagation;
    bool targetStopPropagation;
    bool ancestorPreventDefault;
    bool preventOnKeyDown;
    string logValue = string.Empty;

    void LogEvent(string message)
    {
        logValue += message + Environment.NewLine;
    }
}
